<template>
  <!-- 注册账号 -->
  <div>
    <div>
      <el-card shadow="always" class="mid">
        <!-- 卡片头部 -->
        <div slot="header" class="clearfix">
          <span>注册账号</span>
        </div>
        <!-- 注册表单 添加注册表单验证-->
        <el-form 
        :model="registFormList" 
        :rules="registerFormRule"
        ref="registerFormRef"
        >
          <!-- 用户名 -->
          <el-form-item prop="registerName">
            <el-input
              placeholder="请输入账号"
              v-model="registFormList.registerName"
            >
              <el-button slot="prepend" icon="el-icon-user"></el-button>
            </el-input>
          </el-form-item>
          <!-- 第一遍密码 -->
          <el-form-item prop="firstPassword">
            <el-input
              placeholder="请输入密码"
              :type="passwordType1"
              v-model="registFormList.firstPassword"
            >
              <el-button slot="prepend" icon="el-icon-lock"></el-button>
              <i
              class="el-icon-view el-input__icon"
              :style="fontstyle1"
              slot="suffix"
              @click="ShowPassword1"
            ></i>
            </el-input>
          </el-form-item>
          <!-- 第二遍密码 -->
          <el-form-item prop="secondPassword">
            <el-input
              placeholder="请再次输入密码"
              :type="passwordType2"
              v-model="registFormList.secondPassword"
            >
              <el-button slot="prepend" icon="el-icon-lock"></el-button>
              <i
              class="el-icon-view el-input__icon"
              :style="fontstyle2"
              slot="suffix"
              @click="ShowPassword2"
            ></i>
            </el-input>
            <!-- 输入正确反馈红色的对勾 -->
            <!-- <i type="ios-checkmark-circle" v-if="changeAgainFlag == 1" color="#35B449"></i>
             <i type="md-close-circle" v-else-if="changeAgainFlag == 2" color="#f00"></i> -->
          </el-form-item>
          <!-- 验证码 引用验证码组件 验证码验证-->
           <el-form-item prop="reVerifycode">
            <el-input
              style="width: 160px"
              placeholder="验证码不区分大小写"
              v-model="registFormList.reVerifycode"
            >
            </el-input>
            <div class="identifybox">
              <div @click="refreshCode">
                <SIdentify :identifyCode="identifyCode"></SIdentify>
              </div>
              <el-button @click="refreshCode" type="text" class="textbtn">看不清，换一张</el-button> 
          </div> 
          </el-form-item>  
          <!-- 注册按钮 -->
          <el-form-item>
            <el-button type="primary" style="width: 400px" @click="registerButton"
              >注册</el-button
            >
          </el-form-item>
          <span>已有账号？
            <router-link to="/login" style="color: red;">登录</router-link></span>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import SIdentify from "./SIdentify";
import {nanoid} from 'nanoid'
export default {
  name: "MyRegister",
  components: {
    SIdentify,
  },
  data() {
    //验证码验证
    const validateVerifycode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (value !== this.identifyCode) {
        console.log("validateVerifycode:", value);
        callback(new Error("验证码不正确"));
      } else {
        callback();
      }
    };
    // 重复密码验证
    const pwdAgainCheck = async(rule, value, callback) => {
      if (value.length < 1) {
        this.changeAgainFlag = 2;
        return callback(new Error('重复密码不能为空！'));
      } else if(this.registFormList.firstPassword != this.registFormList.secondPassword){
        this.changeAgainFlag = 2;
        return callback(new Error('两次输入密码不一致！'));
      }else{
        this.changeAgainFlag = 1;
        callback()
      }
    };
    return {
      registFormList: {
        id:nanoid(),
        registerName: "",
        firstPassword: "",
        secondPassword: "",
        reVerifycode: "",
      },
      registerFormRule: {
        registerName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        firstPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 8,
            max: 20,
            message: "长度在 8 到 20 个字符",
            trigger: "blur",
          },
        ],
        secondPassword:[{ required: true,  trigger: "blur" ,validator:pwdAgainCheck},],
        reVerifycode: [
          { required: true, trigger: "blur", validator: validateVerifycode },
        ],
      },
      //二次密码验证
      // changeAgainFlag:0,
      //密码是否可见开关
      fontstyle1: "",
      passwordType1: "password",
      fontstyle2: "",
      passwordType2: "password",
      // 验证码的数据库
      identifyCodes: "1234567890",
      // 验证码数组传值
      identifyCode: "",
    };
  },
  methods: {
    // 通过改变input的type使密码可见
    ShowPassword1() {
      this.fontstyle1 === ""
        ? (this.fontstyle1 = "color: red")
        : (this.fontstyle1 = ""); // 改变密码可见按钮颜色
      this.passwordType1 === ""
        ? (this.passwordType1 = "password")
        : (this.passwordType1 = "");
    },
    ShowPassword2() {
      this.fontstyle2 === ""
        ? (this.fontstyle2 = "color: red")
        : (this.fontstyle2 = ""); // 改变密码可见按钮颜色
      this.passwordType2 === ""
        ? (this.passwordType2 = "password")
        : (this.passwordType2 = "");
    },
    // 生成随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    // 切换验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    // 生成四位随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
      console.log(this.identifyCode);
    },
    //注册按钮
    registerButton() {
      this.$refs.registerFormRef.validate(async valid => {
        if (!valid) return;
        const { data:res } =await this.$http.post("register", this.registFormList);
        if (res.code !== 200) return this.$message.error(res.msg);
        this.$message.success("注册成功");
        console.log(res);
        this.$router.push("/");
      });
    },
  },
  created() {
    //初始化验证码
    this.refreshCode();
    this.makeCode(this.identifyCodes, 4);
  },

  mounted() {
    // 验证码初始化
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
};
</script>

<style scoped>
.mid {
  margin: auto;
  margin-top: 100px;
  width: 440px;
}
.identifybox {
  display: flex;
  justify-content: space-between;
  float: right;
  margin-top: 7px;
}
</style>>

